<template>
  <div>
    <h1 style="text-align: center"> 密码输入框（Password Input）组件示例</h1>
    <h2>1. 基础用法</h2>
    <PasswordInput
        v-model="password"
        placeholder="Enter your password"
    />
    <h2>2. 带强度指示和切换按钮</h2>
    <PasswordInput
        v-model="password2"
        placeholder="Enter strong password"
        :strength-meter="true"
        :toggleable="true"
        @toggleShowPassword="handleToggle"
    />
    <h2>3. 带验证和消息提示</h2>
    <PasswordInput
        v-model="password3"
        placeholder="At least 8 characters"
        :pattern="pattern"
        :error-message="errorMsg"
        :success-message="successMsg"
        @input="validatePassword"
    />
    <h2>4. 禁用状态和自定义样式</h2>
    <PasswordInput
        v-model="password"
        placeholder="Disabled input"
        :disabled="true"
        class="custom-style"
        style="border-radius: 20px; padding: 12px;"
    />
    <h2>5. 完整功能示例</h2>
    <PasswordInput
        v-model="password5"
        placeholder="Enter secure password"
        :maxlength="20"
        :toggleable="true"
        :strength-meter="true"
        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
        :error-message="errorMsg5"
        :success-message="successMsg5"
        @change="logChange5"
        @keyup.enter="submit5"
        class="full-featured"
    />
  </div>

</template>

<script setup>
import { ref } from 'vue'
import PasswordInput from '@/components/PasswordInput/PasswordInput.vue'

const password = ref('')

// 示例2
const password2 = ref('')
const handleToggle = (visible) => {
  console.log('Password visibility:', visible)
}

// 示例3
const password3 = ref('')
const pattern = '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'

const errorMsg = ref('')
const successMsg = ref('')

const validatePassword = () => {
  const isValid = new RegExp(pattern).test(password.value)
  errorMsg.value = isValid ? '' : 'Minimum 8 characters with letters and numbers'
  successMsg.value = isValid ? 'Password is valid' : ''
}

// 示例5
const password5 = ref('')
const errorMsg5 = ref('')
const successMsg5 = ref('')

const logChange5 = (e) => {
  console.log('Password changed:', e.target.value)
}

const submit5 = () => {
  if (!errorMsg.value) {
    console.log('Submitting password...')
  }
}

</script>
<style>
h2{
  margin-top: 20px;
}

/** 示例4 **/
.custom-style {
  background-color: #f5f7fa;
  border: 2px solid #909399;
}

/** 示例5 **/
.full-featured {
  border: 2px solid #e6a23c;
  transition: all 0.3s;
}

.full-featured:focus {
  border-color: #67c23a;
}
</style>